<script setup>
import {computed} from 'vue'
let props = defineProps({
    msg:{
        type:String,
        default:""
    },
    confirmCallback:{
        type:Function
    },
    cancelCallback:{
        type:Function
    }
})
let color={info:'#3f0',warn:'#f66',error:'#c00'}

</script>

<template>
<div class="box">
    <div class="content">
        <img src="../../assets/密码.png" alt="" />
        <span>{{ msg }}</span>
    </div>
    <div class="btns">
        <button @click="confirmCallback">确定</button>
        <button @click="cancelCallback">取消</button>
    </div>
</div>
</template>

<style scoped>
.box{
    width:200px;
    display:block;
    padding:5px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
    background-color:#fff;
    box-shadow: 1px 1px 5px #ccc;
}
.box .content{
    display: flex;
    align-items: center;
    gap:10px;
    justify-content: center;
    margin:20px 0;
}
.box .content img{
    width:22px;
    height:22px;
}
.box .btns{
    display: flex;
    justify-content: end;
    gap:10px;
}
.btns button{
    border:none;
    background-color:#088;
    color:white;
    padding:3px 5px;
}
</style>